<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作  针对元素增删改操作
		 apppend()     功能:在匹配元素集合中所有元素的内部末尾插入内容
		 perpend()     功能:在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()       功能：在匹配元素集合中所有元素的外部后面插入内容
		 before()      功能：在匹配元素集合中所有元素的外部前面插入内容
		 
		 remove()      功能：移除匹配元素接种所有的元素和子元素【盒子模型都删除】
		 empty()       功能：清空匹配元素集合中的所有元素内容【盒子模型不删】
		  
		 replaceWith()  功能：
		 -->
		<style>
			button{
				margin: 20px;
				padding: 10px 15px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border: 5px solid skyblue;
				margin-top: 10px;
				
			}
			#newElement{
				border-radius: 50%;
				height: 100px;
				width: 100px;
				background-image: url(../img/2.gif);
				color: transparent;
				background-size: 100% 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
	    <button id="appendBtn">内部末尾插入元素</button>
		<button id="perpendBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<div id="target">
			<p>目标元素的初始掉落</p>
		</div>
		
		<div id="newElement" style="display: none;">
			<p>也无风雨也无晴</p>
		</div>
		
		<script>
			$("#appendBtn").click(function(){
				//1.1  追加内容是新元素--克隆--html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				//1.2自带属性和属性值 隐藏--改成显示
				cpe.css("display","block");
				//1.3将复制出来的内容追加给当前元素
				$("#target").append(cpe);
			}); 
			$("#perpendBtn").click(function(){
				var autumn=$("#newElement").clone();
				autumn.css("display","block");
				$("#target").perpend(autumn);
			});
			$("#afterBtn").click(function(){
				var sum=$("#newElement").clone();
				sum.addClass("newElement");
				$("#target").after(sum);
			});
			$("#beforeBtn").click(function(){
				var spring=$("#newElement").clone();
				spring.css({"display":"block",
				"width":"100px",
				"height":"100px",
				"border-radius":"50%",
				"border":"1px solid blue",
				"font":"none",
				"background-image":"url(../img/1.gif)",
				"background-size":"100% 100%",
				"color":"transparent"
				});
				$("#target").before(spring);
			});
			
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			
			$("#replaceBtn").click(function(){
				var c=$("#newElement").clone().css("display","block");
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>